<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/laypage.css">
</head>
<script src="/js/vue/vue.min.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/laypage/laypage.js" charset="UTF-8"></script>
<script src="/js/layer/layer.js" charset="UTF-8"></script>

<body>
<div id="app" class="container">
    <form class="form-inline bg-danger" role="form">
        查询条件:
        <div class="form-group">
            <label class="sr-only" for="username"></label>
            <input type="text" class="form-control" id="username" placeholder="用户名称">
        </div>

        <div class="form-group">
            <label class="sr-only" for="userage"></label>
            <input type="text" class="form-control" id="userage" placeholder="用户年龄">
        </div>

        <button type="button" id="findUser" class="btn btn-success">查询用户</button>
        <button type="button" id="addUser" class="btn btn-danger">增加用户</button>
    </form>

    <div class="table-responsive">
        <table class="table">
            <thead>
            <tr class="success">
                <th>用户</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="active" v-for="(item,index) in result">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>
                    <a href="#" @click="editEvent(item.id)">编辑</a>
                    <a href="#" @click="delEvent(item.id)">删除</a>
                </td>
            </tr>
            </tbody>
            <tr>
                <td colspan="3">
                    <div id="pagenav"></div>
                </td>
            </tr>
        </table>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                result: []
            }
        });

    ///
        var getUserPageList = function (curr) {
            $.ajax({
                type: 'post',
                dataType: "json",
                url: "/getPage",
                data: {
                    pageNum: curr || 1,
                    pageSize: 5,
                    name: $("#username").val()
                },
                success: function (msg) {
                    app.result = msg.page;
                    laypage({
                        cont: "pagenav",
                        pages: msg.totalPage,
                        skin: "#DB7023",
                        first: "第一页",
                        last: "最后一页",
                        curr: curr || 1,
                        jump: function (obj, first) {
                            if (!first) {
                                getUserPageList(obj.curr);
                            }
                        }
                    });
                }
            });
        }

        getUserPageList();

        $("#findUser").click(function () {
            getUserPageList();
        });


        //新增用户
        $("#addUser").on("click", function () {
            layer.open({
                type: 2,
                title: '增加用户',
                fix: false,
                maxmin: true,
                shadeClose: true,
                area: ['1000px', '600px'],
                content: '/ftl/add.html',
                end: function () {
                    getUserPageList();
                }
            });
        });


        //删除用户
        var delEvent = function (id) {
            layer.confirm("确定删除吗？",
                {btn: ['是', '否']},
                //是
                function () {
                    $.ajax({
                        type: 'post',
                        dataType: 'json',
                        url: '/del',
                        data: {
                            id: id
                        },
                        success: function (msg) {
                            getUserPageList();
                            layer.msg("已经成功删除记录" + id, {icon: 1});
                        }
                    })
                },
                //否
                function () {

                }
            );
        }

        //编辑用户
        var editEvent = function (id) {
            layer.open({
                type: 2,
                title: '编辑用户',
                fix: false,
                maxmin: true,
                shadeClose: true,
                area: ['1000px', '600px'],
                content: '/editPage?id=' + id,
                end: function () {
                    getUserPageList();
                }
            })
        }


    </script>
</div>
</body>    
    